<template>
  <div class="analysis-page">
    <Card class="search-banner">
      <table-search
        :queryFormItem="queryFormItem"
        :collapseFormItem="collapseFormItem"
        :data="filter"
        :labelWidth="labelWidth"
        @handleSearch="handleSearch"
        @handleReset="handleReset"
        @change="change"
      ></table-search>
    </Card>
    <Row :gutter="6" class="top-part">
      <Col span="12" style="height: 100%">
        <Card v-if="!!barData">
          <starLine
            class="chart-item"
            :language="barLanguage"
            :data="barData"
            :config="barConfig"
          ></starLine>
        </Card>
        <noData v-else class="no-data"></noData>
      </Col>
      <Col span="12" style="height: 100%">
        <Card v-if="!!pieData">
          <starPie
            class="chart-item"
            :language="pieLanguage"
            :data="pieData"
            :config="pieConfig"
          ></starPie>
        </Card>
        <noData v-else class="no-data"></noData>
      </Col>
    </Row>
    <cfg-sheet v-bind="bindConfig"></cfg-sheet>
  </div>
</template>

<script>
import TableSearch from "public/components/table/parts/table-search";
import { myRequest } from "public/service/api/myRequest";
import noData from "../components/noData.vue";

export default {
  components: { TableSearch, noData },
  props: {
    queryFormItem: {
      default: () => [],
    },
    collapseFormItem: {
      default: () => [],
    },
    type: {
      default: "",
    },
    sourceData: {
      default: () => {
        return {};
      },
    },
    classification: {
      default: () => {
        return "1";
      },
    },
  },
  data() {
    return {
      filter: {
        typeName: "钨粉",
      },
      labelWidth: 80,
      bindConfig: {
        showTotal: false,
        columns: [
          {
            type: "index",
            width: 70,
            align: "center",
          },
          {
            title: "批次号",
            key: "batchNo",
            minWidth: 100,
          },
          {
            title: "产物批次号",
            key: "productBatchNo",
            minWidth: 120,
          },
          
          {
            title: "类型名称",
            key: "typeName",
            minWidth: 120,
          },
          {
            title: "工艺",
            key: "technology",
            minWidth: 120,
          },
         
          {
            title: "设备",
            key: "equName",
            minWidth: 120,
          },
          {
            title: "数量",
            key: "quantity",
            minWidth: 120,
          },
          {
            title: "单位",
            key: "unit",
            minWidth: 120,
          },
          {
            title: "单价",
            key: "unitPrice",
            minWidth: 120,
          },
          {
            title: "成本",
            key: "cost",
            minWidth: 120,
          },

          {
            title: "开始时间",
            key: "startTime",
            minWidth: 160,
          },
          {
            title: "结束时间",
            key: "endTime",
            minWidth: 160,
          },
        ],
        data: [
          { sf_energyName: 1 },
          { sf_energyName: 1 },
          { sf_energyName: 1 },
          { sf_energyName: 1 },
          { sf_energyName: 1 },
          { sf_energyName: 1 },
          { sf_energyName: 1 },
          { sf_energyName: 1 },
          { sf_energyName: 1 },
          { sf_energyName: 1 },
          { sf_energyName: 1 },
        ],
      },
      barLanguage: {
        "en-US": {
          headTitle: "monthly energy statistics",
          title: "",
        },
        "zh-CN": {
          headTitle: "当月能源统计",
          title: "",
        },
      },
      barData: null,
      barConfig: {
        type: "bar",
        toolbox: false,
        xAxisNameLocation: "",
        boundaryGap: true,
        yAxisNameLocation: "end",
        color: [
          "#5470c6",
          "#91cc75",
          "#fac858",
          "#ee6666",
          "#73c0de",
          "#3ba272",
          "#fc8452",
          "#9a60b4",
          "#ea7ccc",
        ],
        legend: true,
        grid: {
          bottom: 40,
        },
        showBackground: true,
      },
      pieConfig: {
        toolbox: false,
        legend: true,
        radius: ["20%", "70%"],
        center: ["50%", "50%"],
        roseType: "radius",
        label: true,
        labelLine: true,
        color: [
          "#5470c6",
          "#91cc75",
          "#fac858",
          "#ee6666",
          "#73c0de",
          "#3ba272",
          "#fc8452",
          "#9a60b4",
          "#ea7ccc",
        ],
      },
      pieLanguage: {
        "en-US": {
          headTitle: "the proportion of energy in the current month",
          title: "",
          xAxisTitle: "",
          yAxisTitle: "value",
        },
        "zh-CN": {
          headTitle: "当月能源占比",
          title: "",
          xAxisTitle: "",
          yAxisTitle: "数值",
        },
      },
      pieData: null,
      lineData: null,
      lineLanguage: {
        "en-US": {
          headTitle: "energy analysis for the current month",
          title: "",
        },
        "zh-CN": {
          headTitle: "当月能源分析",
          title: "",
        },
      },
      lineConfig: {
        type: "line",
        toolbox: false,
        xAxisNameLocation: "",
        boundaryGap: false,
        yAxisNameLocation: "end",
        legend: true,
        smooth: true,
        color: [
          "#5470c6",
          "#91cc75",
          "#fac858",
          "#ee6666",
          "#73c0de",
          "#3ba272",
          "#fc8452",
          "#9a60b4",
          "#ea7ccc",
        ],
        grid: {
          bottom: 40,
        },
      },
    };
  },
  computed: {
    lang() {
      return {
        "en-US": {
          cancel: "cancel",
          confirmDelete: "confirm delete?",
        },
        "zh-CN": {
          cancel: "取消",
          confirmDelete: "确认删除？",
        },
      }[this.G_Locale];
    },
  },
  created() {
    //初次打开页面，默认当月并按天统计
    // this.getList();
  },
  methods: {
    getList() {
      let url = ""
      if (this.classification == "4") {
        url = "/star4.0/quantityStatistics/queryLineAndPieStatisticsByMonthRange"
      } else {
        url = "/star4.0/quantityStatistics/queryLineAndPieStatisticsByMonth"
      }
      myRequest({
        url: url,
        method: "post",
        data: { ...this.sourceData },
      }).then((res) => {
        console.log("🚀 ~ getList ~ res:", res);
        let { categories, values } = res;
        this.$set(this, "barData", {
          categories,
          values: this.transValues(values),
        });
        res.dataList.forEach((item) => {
          item.name = item.name;
        });
        this.$set(this, "pieData", res.dataList);
        this.$set(this.bindConfig, "data", res.list || []);
      });
    },
    change(val) {
      this.$emit("slefChange", val);
      console.log(val);
    },
    handleSearch(data) {
      this.filter = data;
      if (this.classification == "1") {
        let { yearMonth } = this.filter;
        if (!yearMonth) {
          this.$Message.error("请选择年月");
          return;
        }
      }
      if (this.classification == "2") {
        let { yearMonth, spec } = this.filter;
        if (!yearMonth || !spec) {
          this.$Message.error("请选择年月和规格");
          return;
        } else {
          this.filter.spec = this.filter.spec.split(",")
        }
      }
      if (this.classification == "3") {
        let { yearMonth, batchNo } = this.filter;
        if (!yearMonth || !batchNo) {
          this.$Message.error("请选择年月和批次");
          return;
        }
      }
      if (this.classification == "4") {
        let { begin, end } = this.filter;
        if (!begin || !end) {
          this.$Message.error("请选择开始年月和结束年月");
          return;
        }
      }
      this.sourceData = Object.assign(this.sourceData, this.filter);
      this.getList();
    },
    handleReset() {
      if (this.classification == "1") {
        this.filter = {};
      }
      if (this.classification == "2") {
        this.filter = {
          typeName: "钨粉",
        };
        this.change(this.filter.typeName);
      }
      if (this.classification == "3") {
        this.filter = {
          yearMonth: "",
        };
        this.change(this.filter.yearMonth);
      }
    },
    transValues(values = []) {
      let obj = {};
      values.forEach((d) => {
        obj[d.name] = d.value;
      });
      return obj;
    },
  },
};
</script>
<style scoped lang="scss">
.analysis-page {
  padding-top: 10px;
  height: 100%;
  padding: 10px;
  .top-part {
    height: calc(40% - 70px);
  }
  .chart-item {
    // border: 1px solid #797979;
    // border-radius: 10px;
    height: 100%;
    padding-top: 10px;
  }
  .line-chart {
    margin-top: 10px;
    height: 100%;
  }
  .no-data {
    border: 1px solid #dfdfdf;
    background-color: #fff;
    border-radius: 10px;
    height: 100%;
    padding-top: 40px;
  }
  .line-no-data {
    margin-top: 10px;
    height: calc(60% - 60px);
  }
}
.search-banner {
  position: relative;
  margin-top: -10px;
}
.ivu-card {
  margin-bottom: 10px;
}
.last-box {
  margin-top: 20px;
}
::v-deep .ivu-col .ivu-card-body {
  height: 320px;
}
::v-deep .last-box .ivu-card-body {
  display: flex;
  justify-content: center;
  height: 380px;
}
</style>
